<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=O5NZXUHnHA1Hppviy6K94VPk"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <title>热力图</title>
    <style type="text/css">
        ul, li {
            list-style: none;
            margin: 0;
            padding: 0;
            float: left;
        }

        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
            font-family: "微软雅黑";
        }

    </style>
</head>
<body>
<div id="container" style="z-index: 0; height: 1080px;width: 1920px;"></div>
<div style="width: 200px; position: absolute; z-index: 50;-moz-user-select: none;-moz-text-size-adjust: none;
bottom: 20px;right:10px;">
    <a>热力图图例</a><br/>
    <div style="width: 200px">
        <a id="min_legend" style="float: left;"></a>
        <a id="max_legend" style="float: right;"></a>
    </div>
    <canvas id="legend_canvas" height="20" width="200"></canvas>
</div>
<div id="tooltip" class="tooltip"
     style="display: none;z-index: 51;position: absolute;-moz-user-select: none;-moz-text-size-adjust: none;">
    <div class="triangle"></div>
    <div class="square"></div>
</div>
<div style="width: 500px; position: absolute; z-index: 50;-moz-user-select: none;-moz-text-size-adjust: none;
top: 20px;left:10px;">
    <h2>${baiduMap.title}</h2><br/>
</div>
<script type="text/javascript">
    var gradient = {
        1: "rgb(255,0,0)",//红
        0.85: "rgb(255, 255, 0)",//黄
        0.75: "rgb(0,255,0)",//绿
        0.55: "rgb(0,255,255)",//青
        0.3: "rgb(0,0,255)",//蓝
        0: "rgb(255,255,255)"//白色
    };

    /*start legend code*/
    var max = '${mapInfo.max}';
    var min = '${mapInfo.min}';
    document.getElementById("max_legend").innerHTML = parseNum(max);
    document.getElementById("min_legend").innerHTML = min;
    var c = document.getElementById("legend_canvas");
    var cxt = c.getContext("2d");
    var gradientCfg = cxt.createLinearGradient(0, 0, 200, 1);
    for (var key in gradient) {
        gradientCfg.addColorStop(key, gradient[key]);
    }
    cxt.fillStyle = gradientCfg;
    cxt.fillRect(0, 0, 200, 50);
    /*end legend code*/


    var map = new BMap.Map("container");          // 创建地图实例
    map.setMapStyle({style: 'grayscale'});
    map.centerAndZoom(new BMap.Point("108.0", "35"), "6");// 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(); // 允许滚轮缩放

    heatmapOverlay = new BMapLib.HeatmapOverlay({"radius": 20, "gradient": gradient});
    map.addOverlay(heatmapOverlay);
    <%--console.info('${baiduMap.data}');--%>
    heatmapOverlay.setDataSet({data: ${mapInfo.dataLists}, max: max});
    //是否显示热力图
    heatmapOverlay.show();

    //    /*start tooltips code*/
    //    var tooltip = document.querySelector('.tooltip');
    //    map.addEventListener("mousemove", function (data) {
    //        var x = data.clientX;
    //        var y = data.clientY;
    //        var value = heatmapOverlay.heatMap.getValueAt({"x": x, "y": y});
    //        tooltip.style.display = 'block';
    //        tooltip.style.left = (x + 15) + 'px';
    //        tooltip.style.top = (y + 15) + 'px';
    //        //        tooltip.style.webkitTransform = 'translate(' + (x + 15) + 'px, ' + (y + 15) + 'px)';
    //        tooltip.innerHTML = value;
    //    });
    /*end tooltips code*/
    function parseNum(num) {
        var reg = /(?=(?!\b)(\d{3})+$)/g;
        return String(num).replace(reg, ',');
    }
</script>
</body>
</html>
